<template>
	<div id="item-container">
		<!-- 物品添加/修改对话框 -->
		<el-dialog :title="selItem.id == undefined ? '创建物品' : '修改物品'" :visible.sync="active" width="50%"
			:before-close="handleClose">
			<el-form :model="selItem" label-width="80px">
				<el-form-item label="物品名称">
					<el-input v-model="selItem.name"></el-input>
				</el-form-item>
				<el-form-item label="物品描述">
					<el-input v-model="selItem.description" type="textarea" rows="4"></el-input>
				</el-form-item>
				<el-form-item label="堆叠数量">
					<el-input-number v-model="selItem.stackSize" min="1" style="width: 100%;"></el-input-number>
				</el-form-item>
				<el-form-item label="物品种类">
					<el-select v-model="selItem.type" class="w-full">
						<el-option v-for="(type, index) of itemTypes" :key="index" :label="type.name" :value="type.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="默认配方" v-show="!isCreate">
					<recipe-select v-model="selItem.defaultRecipe" :options="selRecipes"></recipe-select>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="success" @click="handleSave"> 确定 </el-button>
				<el-button @click="handleClose">取 消</el-button>
			</div>
		</el-dialog>
		<!-- END物品添加/修改对话框 -->

		<!-- 顶部搜索条件栏 -->

		<!-- 搜索框部分 -->
		<div id="search">
			<el-form :inline="true" :model="searchData" id="search_form">
				<el-form-item label="物品名">
					<el-input placeholder="请输入物品名" v-model="searchData.name" clearable />
				</el-form-item>
				<el-form-item label="种类">
					<el-select v-model="searchData.type" clearable>
						<el-option v-for="t of itemTypes" :key="t.id" :label="t.name" :value="t.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="堆叠数量">
					<el-select v-model="searchData.size" clearable>
						<el-option v-for="size of itemSizes" :key="size" :value="size"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleSearch()">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="success" @click="handleCreate()">添加</el-button>
				</el-form-item>
			</el-form>
		</div>
		<!-- END搜索框部分 -->

		<!-- 物品列表显示部分 -->

		<pagination-table searchUrl="/item/client/list" :searchData="searchData" id="table" :operate-width="320" ref="table"
			has-index>
			<el-table-column label="图片" width="80">
				<template slot-scope="scope">
					<el-image :src="$img.i_64(scope.row.iconUrl)" class="image"></el-image>
				</template>
			</el-table-column>
			<el-table-column prop="name" label="名称"></el-table-column>
			<el-table-column prop="version" label="所属版本"></el-table-column>
			<el-table-column prop="type" label="种类"></el-table-column>
			<el-table-column prop="stackSize" label="堆叠数量"></el-table-column>
			<template v-slot:operate="scope">
				<el-button type="primary" size="mini" @click="handleMotify(scope.row.id)">修改</el-button>
				<el-button type="primary" size="mini" @click="handleOpenInfo(scope.row)">查看信息</el-button>
				<el-button type="primary" size="mini" @click="handleOpenImage(scope.row)">配置图片</el-button>
				<el-button type="danger" size="mini" @click="handleDelete(scope.row.id)">删除</el-button>
			</template>
		</pagination-table>

		<!-- 图片配置弹窗 -->
		<image-dialog v-model="imageActive" type="items" :icon="selIcon"></image-dialog>
		<!-- END图片配置弹窗 -->
	</div>
</template>

<script>
	import RecipeSelect from "../components/RecipeSelect.vue";
	import ImageDialog from "@/components/Dialog/ImageDialog.vue";
	import SimpleRecipeInfoVue from "@/components/SimpleRecipeInfo.vue";
	import PaginationTable from '@/components/PaginationTable.vue';
	export default {
		components: {
			RecipeSelect,
			ImageDialog,
			SimpleRecipeInfoVue,
			PaginationTable,
		},
		name: "ItemPage",
		data() {
			return {
				imageActive: false,
				selIcon: null,

				active: false, // 弹窗是否显示
				isCreate: true, // 是否是创建新物品
				selItem: {}, // 被选中的物品
				selRecipes: [], // 选中物品可被合成的配方

				expands: [],

				itemTypes: [], // 物品种类
				itemSizes: [], // 物品数量

				currentPage: 1, //当前页数
				pageSize: 6, //页面大小

				searchData: {
					name: null,
					type: null,
					size: null,
				},
				
				listener: null,
			};
		},
		methods: {
			Item40(uri) {
				return this.$img.i_40(uri);
			},
			Item64(uri) {
				return this.$img.i_64(uri);
			},
			Item(uri) {
				return this.$img.i_128(uri);
			},
			handleOpenImage(row) {
				this.selIcon = row.iconUrl;
				this.imageActive = true;
			},
			handleSearch() {
				console.log(this.$refs.table)
				this.$refs.table.handleSearch();
			},
			init() {
				this.$api.get("/item/init").then((res) => {
					this.itemSizes = res.data.sizes;
					this.itemTypes = res.data.types;
				});
			},
			handleCreate() {
				this.active = true;
				this.isCreate = true;
				this.selItem = {};
			},
			handleMotify(id) {
				this.active = true;
				this.isCreate = false;
				this.$api.get("/item/info/" + id).then((res) => {
					this.selItem = res.data.item;
					this.selRecipes = res.data.recipes;
				});
			},
			handleOpenInfo(row) {
				this.$router.push({
					path: "/item/info?id=" + row.id
				})
			},
			handleClose() {
				this.active = false;
			},
			handleDelete(id) {
				this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning",
					})
					.then(() => {
						this.$api.post("/item/remove/" + id).then((res) => {
							this.$message({
								type: res.code == 0 ? "success" : "error",
								message: res.message,
							});
							this.init();
							this.handleSearch();
						});
					})
					.catch(() => {
						this.$message({
							type: "info",
							message: "已取消删除",
						});
					});
			},
			handleSave() {
				var url = this.isCreate ? "/item/insert" : "/item/update";
				this.$api.postJson(url, this.selItem).then((res) => {
					this.notice(res);
					this.init();
					this.$refs.table.handleInnerSearch();
					this.handleClose();
				})
			},
		},
		mounted() {
			var _this = this;
			this.$version.addListener("Item", function() {
				console.log("执行");
				_this.init();
				_this.handleSearch();
			});
			this.init();
			this.handleSearch();
			this.listener = (e) => {
				if (e.keyCode == 13) {
					if (this.active) this.handleSave();
					else if (!this.imageActive) this.$refs.table.handleSearch();
				}
			}
			document.addEventListener("keydown", this.listener);
		},
		destroyed() {
			this.$version.removeListener("Item");
			document.removeEventListener("keydown", this.listener);
		},
	};
</script>

<style lang="less" scoped>
	.w-full {
		width: 100%;
	}

	#item-container {
		width: 100%;
		height: 100%;


		#search {
			background-color: white;
			padding: 10px;
			border-radius: 8px;
			height: 60px;
			box-sizing: border-box;
			width: 100%;
			text-align: right;
			// 保证搜索框向右对齐

			#search_form {
				/deep/ .el-form-item {
					margin-bottom: 0;
				}
			}
		}

		#table {
			width: 90%;
			margin: auto;
			margin-top: 10px;
			height: calc(100vh - 120px - 50px);

			.image {
				width: 40px;
				height: 40px;
			}
		}
	}
</style>